<template>
  <div class="dialog">
    <el-dialog
      title="添加账户"
      width="30%"
      :destroy-on-close="true"
      v-model="showDlg"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="form">
        <el-form
          ref="refForm"
          :model="form"
          label-width="80px"
          style="margin: 10px; width: auto"
        >
          <el-form-item label="账户名称">
            <el-input
              v-model="form.name"
              maxlength="10"
              minlength="4"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.type_" placeholder="类型">
              <el-option label="投资" value="投资"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="子类型">
            <el-select v-model="form.subtype" placeholder="子类型">
              <el-option label="股票" value="股票"></el-option>
              <el-option label="基金" value="基金"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="持有人">
            <el-input
              v-model="form.owner"
              maxlength="10"
              minlength="4"
            ></el-input>
          </el-form-item>
          <el-form-item class="text_right">
            <el-button @click="dlgChange(false)">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { createAccBasic } from "@/apis/account";

export default {
  name: "AccountDlg",
  props: {
    dialog: Object
  },
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    const showDlg = ref(props.dialog.show);
    const form = reactive({
      name: "",
      type_: "投资",
      subtype: "",
      owner: ""
    });
    const refForm = ref();
    const reset = () => {
      form.name = "";
      form.type_ = "";
      form.subtype = "";
      form.owner = "";
    };
    const dlgChange = refresh => {
      emit("dlgChange", refresh);
    };
    const submit = () => {
      createAccBasic(form)
        .then(response => {
          dlgChange(true);
          proxy.$message.success(response.message);
        })
        .catch(error => {
          proxy.$message.error(error);
          dlgChange(false);
        });
    };
    return {
      showDlg,
      form,
      refForm,
      reset,
      submit,
      dlgChange
    };
  }
};
</script>

<style scoped></style>
